<!--
 * @Descripttion: 异步选择器
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2021年8月3日15:53:37
 * @LastEditors: Xujianchen
 * @LastEditTime: 2023-03-17 10:20:39
-->
<!-- 带分页功能的选择器 -->
<template>
	<div class="sc-select">
		<div v-if="initloading" class="sc-select-loading">
			<el-icon class="is-loading"><el-icon-loading /></el-icon>
		</div>
		<el-select v-bind="$attrs" :loading="loading" filterable remote remote-show-suffix
			:remote-method="remoteMethod">
			<el-option v-for="(item, index) in options" :key="index"
				:label="isSpecial ? item[props.label] + ' - ' + item[props.label] : item[props.label]"
				:value="item[props.value]">
				<slot name="option" :data="item"></slot>
			</el-option>
			<div style="bottom: -10px">
				<el-pagination @current-change="pageChange" :current-page="pageNum" :page-size="pageSize"
					layout="prev, pager,next,total" :total="total">
				</el-pagination>
			</div>
		</el-select>
	</div>
</template>

<script>
import config from '@/config/select'

export default {
	props: {
		apiObj: { type: Object, default: () => { } },
		dic: { type: String, default: '' },
		params: { type: Object, default: () => ({}) },
		props: { type: Object, default: () => ({}) },
		defaultLabel: { type: String, default: '' },
		isSpecial: { type: Boolean, default: false }
	},
	data() {
		return {
			dicParams: this.params,
			loading: false,
			options: [],
			// props: config.props,
			initloading: false,

			pageNum: 1,
			pageSize: 20,
			total: 0,
		}
	},
	created() {
		this.initloading = true
		this.getRemoteData()
	},
	methods: {
		//选项显示隐藏事件
		visibleChange(ispoen) {
			if (ispoen) {
				this.getRemoteData()
			}
		},
		//获取数据
		async getRemoteData(pageNum, parentApiObj) {
			if (this.dicParams != this.dicParams) {
				this.params = this.dicParams
			}
			this.params.pageNum = pageNum ? pageNum : this.pageNum
			this.params.pageSize = this.pageSize

			this.loading = true
			// this.dicParams[config.request.name] = this.dic
			var res = {}
			if (this.apiObj.get !== undefined) {
				if (this.apiObj) {
					res = await this.apiObj.get(this.params)
				} else if (this.dic) {
					res = await config.dicApiObj.get(this.params)
				} else if (parentApiObj) {
					res = await parentApiObj.get(this.params)
				}
			} else {
				let req = { data: this.params }
				if (this.apiObj) {
					res = await this.apiObj.post(req)
				} else if (this.dic) {
					res = await config.dicApiObj.post(req)
				} else if (parentApiObj) {
					res = await parentApiObj.post(req)
				}
			}
			this.pageNum = res.pageNum
			this.pageSize = res.pageSize
			this.total = res.total

			var response = config.parseData(res)
			this.options = response.data

			if (this.defaultLabel && !this.options.some(item => item[this.props.value] === this.$attrs.modelValue)) {
				this.options.unshift({
					[this.props.label]: this.defaultLabel,
					[this.props.value]: this.$attrs.modelValue
				});
			}
			this.loading = false
			this.initloading = false
		},
		pageChange(pageNum) {
			this.getRemoteData(pageNum)
		},
		async remoteMethod(filterValue) {
			if (filterValue == '') {
				return false
			}
			this.params[this.props.filterName] = filterValue
			this.getRemoteData()
		}
	}
}
</script>

<style scoped>
.sc-select {
	display: inline-block;
	position: relative;
}

.sc-select-loading {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	z-index: 100;
	border-radius: 5px;
	border: 1px solid #ebeef5;
	display: flex;
	align-items: center;
	padding-left: 10px;
}

.sc-select-loading i {
	font-size: 14px;
}

.dark .sc-select-loading {
	background: var(--el-bg-color-overlay);
	border-color: var(--el-border-color-light);
}
</style>
